<template>
  <div class="home-page">
    <!-- 1. 顶部渐变背景和问候语 (保持) -->
    <header class="header-section">
      <div class="header-content">
        <div class="welcome-text">
          <h2>下午好</h2>
          <p>时刻关心家人的健康</p>
        </div>
        <div class="notification-icon" @click="goToNotifications">
          <van-badge :content="notificationCount > 0 ? notificationCount : ''" :max="9">
            <van-icon name="bell" size="24" />
          </van-badge>
        </div>
      </div>
    </header>

    <main class="content-section">
      <!-- 2. 老人信息核心卡片 (保持) -->
      <div class="elderly-card" @click="goToElderlyInfo">
        <div class="elderly-avatar">
          <span>{{ elderlyInfo.fullName?.charAt(0) }}</span>
        </div>
        <div class="elderly-details">
          <div class="name-age">
            <span class="name">{{ elderlyInfo.fullName }}</span>
            <span class="age">{{ elderlyAge }} 岁</span>
          </div>
          <p class="room-info">
            <van-icon name="location-o" />
            {{ elderlyInfo.bedId}}
          </p>
          <p class="health-status-text">
            健康状况: {{ elderlyInfo.healthStatusText || '暂无描述' }}
          </p>
        </div>
        <van-icon class="arrow-icon" name="arrow" />
      </div>

      <!-- 3. [新增] 待缴费账单提醒 (条件渲染) -->
      <div v-if="pendingBill" class="pending-bill-card" @click="goToFinance">
        <van-icon name="warning-o" size="24" color="#ED6A0C" />
        <div class="bill-info">
          <p class="bill-title">{{ pendingBill.billMonth }} 账单待缴费</p>
          <p class="bill-amount">金额: ¥ {{ pendingBill.totalAmount.toFixed(2) }}</p>
        </div>
        <van-button type="warning" size="small" round>立即支付</van-button>
      </div>

      <!-- 4. [新增] 今日动态时间线 -->
      <van-cell-group inset title="今日动态" class="timeline-section">
        <div v-if="todaySchedule.length > 0" class="timeline-container">
          <van-steps direction="vertical" :active="-1">
            <van-step v-for="(item, index) in todaySchedule" :key="index">
              <h3>{{ item.title }}</h3>
              <p class="time">{{ item.time }}</p>
              <p class="content">{{ item.content }}</p>
            </van-step>
          </van-steps>
        </div>
        <van-empty v-else description="今日暂无特别动态" class="empty-state" />
      </van-cell-group>


      <!-- 5. 常用服务 (保持，作为固定入口) -->
      <van-cell-group inset title="常用服务" class="quick-links-group">
        <van-cell
          v-for="link in quickLinks"
          :key="link.text"
          :title="link.text"
          :icon="link.icon"
          is-link
          :to="link.to"
        >
          <template #icon>
            <van-icon :name="link.icon" :color="link.color" class="van-cell__left-icon" size="20" />
          </template>
        </van-cell>
      </van-cell-group>
    </main>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useUserStore } from "@/stores/store";
const userStore = useUserStore();
const router = useRouter();

// --- 模拟数据 (严格遵循数据库 schema) ---

// 1. 家属用户信息 (来自 family_profiles)
const familyUser = ref({ fullName: '王女士' });

// 2. 老人信息 (来自 elderly_profiles, beds)
const elderlyStore = useElderlyStore();
const elderlyInfo = computed(() => elderlyStore.elderlyInfo);

// 3. [新增] 待缴费账单 (来自 bills 表，status='unpaid')
//    如果后端返回 null 或空数组，这个卡片将不会显示
const pendingBill = ref({
  billMonth: '2023-10',
  totalAmount: 3580.00,
  dueDate: '2023-11-10',
});

// 4. [新增] 今日动态时间线 (综合来自 health_records, medications)
const todaySchedule = ref([
  {
    time: '08:30',
    title: '早餐后用药',
    content: '服用【拜阿司匹林】1片, 用于心血管维护。', // 来自 medications
  },
  {
    time: '10:05',
    title: '健康数据测量',
    content: '血压: 130/85 mmHg (正常), 心率: 76 bpm (正常)。', // 来自 health_records
  },
  {
    time: '15:00',
    title: '下午茶点',
    content: '提供了无糖酸奶和水果。', // 这部分可以来自一个'护理记录'表
  },
]);

// 5. 快捷功能入口
const quickLinks = ref([
  { text: '探访预约', icon: 'calendar-o', to: '/appointment', color: '#3a7afe' },
  { text: '账单与缴费', icon: 'bill-o', to: '/finance', color: '#07c160' },
  { text: '意见与反馈', icon: 'chat-o', to: '/feedback/new', color: '#ff976a' },
  { text: '健康档案', icon: 'chart-trending-o', to: '/elderly/health', color: '#ee0a24' },
]);

// 6. 模拟通知数量
const notificationCount = ref(3);

// --- 计算属性 ---
const elderlyAge = computed(() => {
  if (!elderlyInfo.value.dateOfBirth) return '未知';
  const birthDate = new Date(elderlyInfo.value.dateOfBirth);
  const today = new Date();
  let age = today.getFullYear() - birthDate.getFullYear();
  const m = today.getMonth() - birthDate.getMonth();
  if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) age--;
  return age;
});

// --- 生命周期钩子 ---
onMounted(() => {
  // fetchHomePageData();
});

// --- 路由跳转方法 ---
const goToNotifications = () => router.push('/settings/notification');
const goToElderlyInfo = () => router.push('/elderly');
const goToFinance = () => router.push('/finance');

</script>

<style scoped>
/* 定义主题色，保持不变 */
:root { /* ... */ }

.home-page {
  background-color: #f7f8fa;
  padding-bottom: 30px; /* 增加底部空间 */
}

/* 顶部和老人卡片样式保持不变 */
.header-section {
  background: linear-gradient(135deg, #5c9cff 0%, #3a7afe 100%);
  color: white;
  padding: 30px 20px 60px 20px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}
.header-content { display: flex; justify-content: space-between; align-items: center; }
.welcome-text h2 { font-size: 22px; font-weight: 500; margin: 0; }
.welcome-text p { font-size: 14px; opacity: 0.8; margin-top: 4px; }
.content-section { padding: 0 16px; margin-top: -40px; }
.elderly-card {
  display: flex; align-items: center; padding: 16px; background-color: #fff;
  border-radius: 12px; box-shadow: 0 8px 20px rgba(120, 120, 120, 0.1);
  margin-bottom: 20px; cursor: pointer; position: relative;
}
.elderly-avatar {
  width: 60px; height: 60px; border-radius: 50%; background-color: #3a7afe;
  color: white; display: flex; justify-content: center; align-items: center;
  font-size: 28px; font-weight: bold; flex-shrink: 0; margin-right: 16px;
}
.elderly-details { flex-grow: 1; }
.elderly-details .name-age { display: flex; align-items: baseline; margin-bottom: 6px; }
.elderly-details .name { font-size: 18px; font-weight: bold; }
.elderly-details .age { font-size: 13px; color: #646566; margin-left: 8px; background-color: #eef2ff; padding: 2px 6px; border-radius: 4px; }
.elderly-details .room-info, .elderly-details .health-status-text { font-size: 13px; color: #646566; margin: 4px 0 0; display: flex; align-items: center; }
.arrow-icon { color: #c8c9cc; font-size: 16px; }

/* [新增] 待缴费账单卡片样式 */
.pending-bill-card {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  background-color: #FFFBE8;
  border: 1px solid #FFF1C2;
  border-radius: 12px;
  margin-bottom: 20px;
  cursor: pointer;
}
.bill-info {
  flex: 1;
  margin: 0 12px;
}
.bill-info .bill-title {
  font-size: 14px;
  font-weight: 500;
  color: #8C5B00;
  margin: 0;
}
.bill-info .bill-amount {
  font-size: 12px;
  color: #8C5B00;
  margin: 4px 0 0;
}

/* [新增] 时间线部分样式 */
.timeline-section {
  background-color: #fff;
}
.timeline-container {
  padding: 16px 16px 16px 10px;
}
.van-steps {
  --van-step-text-color: #323233;
  --van-step-active-color: #3a7afe;
  --van-step-line-color: #ebedf0;
  --van-step-finish-line-color: #3a7afe;
}
.timeline-container .van-step h3 {
  font-size: 15px;
  font-weight: 500;
  margin: 0;
  color: #323233;
}
.timeline-container .van-step .time {
  font-size: 12px;
  color: #969799;
  margin: 4px 0 6px;
}
.timeline-container .van-step .content {
  font-size: 13px;
  color: #646566;
  margin: 0;
  line-height: 1.5;
}
.empty-state {
  padding: 20px 0;
}

/* 常用服务样式保持不变 */
.quick-links-group {
  margin-top: 20px;
}
.quick-links-group .van-cell__left-icon {
  margin-right: 10px;
  display: flex;
  align-items: center;
}
</style>